<template>
	<view>
		<view class="icon">
			<image class="icon1" src="../../static/icon/weixin.png" mode=""></image>
			<image class="icon2" src="../../static/icon/shouquan.png" mode=""></image>
			<image class="icon3" src="../../static/icon/weixin.png" mode=""></image>
		</view>
		<view class="btn" @click="bindPhone">一键绑定手机号码</view>
		<view v-if="show" >
		<view class="mask" @click="show=!show"></view>
		<view class="dialog">
			<view class="text">绑定手机号</view>
			<view class="text1">为了更好的服务您，请先绑定手机号</view>
			<view><input class="line" v-model="icode" type="text" value="" placeholder="请输入推荐码" /></view>
			<view><input class="line" v-model="phone" type="text" value="" placeholder="请输入手机号" /></view>
			<view class="box">
				<view><input class="line" v-model="code" type="text" value="" placeholder="请输入验证码" /></view>
				<view class="button">{{ codeText }}</view>
			</view>
			<view class="confirm" @click="confirmBtn">确定</view>
		</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			codeText: '获取验证码',
			icode:'',
			code:'',
			phone:'',
			show:false
		};
	},
	methods: {
		bindPhone(){
			let self=this
			self.show=true
		},
		confirmBtn(){
			let self=this
			self.show=false
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 200upx;
	margin-bottom: 310upx;
	.icon1 {
		width: 150upx;
		height: 150upx;
	}
	.icon2 {
		width: 80upx;
		height: 30upx;
		margin: 0 60upx;
	}
	.icon3 {
		width: 150upx;
		height: 150upx;
	}
}
.btn {
	height: 110upx;
	background: #46bc36;
	border-radius: 55upx;
	margin: 0 60upx;
	font-size: 36upx;
	font-weight: bold;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mask {
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.7);
}
.dialog {
	position: fixed;
	z-index: 99;
	bottom: 0;
	width: 100%;
	border-radius: 30upx 30upx 0 0;
	height: 772upx;
	background: #fff;
	padding-left: 30upx;
	padding-right: 30upx;
	.text {
		padding-top: 40upx;
		font-size: 44upx;
		font-weight: bold;
		color: #343434;
	}
	.text1 {
		font-size: 24upx;
		color: #9a9a9a;
	}
	.line {
		padding: 54upx 0 36upx;
		border-bottom: 1px solid #f5f5f5;
		font-size: 32upx;
		color: #828282;
	}
	.box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.code {
		}
		.button {
			display: flex;
			justify-content: center;
			background: #fd0c3f;
			border-radius: 33upx;
			height: 66upx;
			line-height: 66upx;
			width: 178upx;
			color: #fff;
		}
	}
	.confirm {
		height: 110upx;
		background: #fd0c3f;
		border-radius: 55upx;
		margin: 0 70upx;
		margin-top: 62upx;
		font-size: 36upx;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
</style>
